<template>
  <div class="tips p-4 text-sm">
    <div class="text-[#F53F3F]">
      通过本功能可为域名批量添加解析记录，解析记录格式规范如下：
    </div>
    <div class="mt-[6px] leading-[22px] text-[#454954]">
      <div>
        一行一条解析记录，格式为：域名、记录类型、主机记录、记录值，中间以空格分隔；
      </div>
      <div>
        例如：abc.com A @ 190.0.0.1；您可借助 excel
        生成解析记录，并复制到下文输入框；
      </div>
      <div>本功能增加的解析记录TTL时间都为10 分钟；</div>
    </div>
  </div>
  <el-form ref="formRef" :model="state" :rules="logManyRules">
    <el-form-item class="mb-[38px]" prop="rrs">
      <div class="flex flex-col w-[600px] relative">
        <el-input
          v-model="state.rrs"
          type="textarea"
          class="domain-input"
          resize="none"
          :placeholder="placeholder"
        />
        <div class="w-full flex justify-between absolute -bottom-7 right-0">
          <div class="inline-block text-xs text-[#868D9D]">{{ total }} 条</div>
          <div
            class="ml-4 flex items-center cursor-pointer select-none"
            :class="
              total ? 'text-[#454954] hover:opacity-80' : 'text-[#C5CBD8]'
            "
            @click="state.rrs = ''"
          >
            <app-icon name="clear" :color="total ? '#595E70' : '#C5CBD8'" />
            <div class="text-xs ml-[6px]">清空记录</div>
          </div>
        </div>
      </div>
    </el-form-item>
  </el-form>
  <div class="pt-[14px] submit-btn">
    <el-divider class="m-0" />
    <el-button
      :loading="loading"
      :disabled="!total"
      class="mt-4 mb-6 w-[74px]"
      type="primary"
      @click="handleSubmit"
      >添加</el-button
    >
  </div>
</template>

<script setup lang="ts">
import type { FormInstance } from 'element-plus'

import { logManyRules } from '../utils/rules/logMany'

interface IProps {
  mainSubmit?: () => Promise<void>
  loading: boolean
  formState: {
    rrs: string
  }
}

interface IEmits {
  (event: 'submit'): void
}

const props = defineProps<IProps>()
const emit = defineEmits<IEmits>()

const formRef = ref<FormInstance>()

const state = computed(() => props.formState)

const total = computed(() =>
  state.value.rrs ? getTrimValue(state.value.rrs).length : 0
)

const placeholder = `一行一条解析记录，最多支持1000条；
格式：域名 记录类型 主机记录 记录值
例如：abc.com A @ 190.0.0.1
支持复制粘贴到输入框，但请核对数据是否正确。`

async function handleSubmit() {
  await formRef.value?.validate()
  emit('submit')
  await props.mainSubmit?.()
}

defineExpose({
  submit: handleSubmit
})
</script>

<style lang="scss" scoped>
.domain-input {
  :deep(.el-textarea__inner) {
    height: 240px;
  }
}

.tips {
  background: #f7f8fa;
  border-radius: 4px;
  margin-bottom: 16px;
}
</style>
